<template>
  <div class="divBox">
    <el-card class="box-card">
      <div class="pack-code-search">
        <div class="search-section">
          <div class="search-row">
            <label class="search-label">单元识别码：</label>
            <el-input
              v-model="searchForm.code"
              placeholder="请输入单元识别码"
              class="search-input"
              @keyup.enter.native="handleSearch"
            ></el-input>
            <el-button type="primary" class="search-btn" @click="handleSearch">查询</el-button>
          </div>

          <!-- 状态显示 -->
          <div class="search-row" v-if="searched">
            <label class="search-label">状态：</label>
            <div class="status-info">
              <span :class="getStatusClass(packData.status)">{{ packData.status || '未知状态' }}</span>
            </div>
          </div>

          <!-- 关联的袋码 -->
          <div class="search-row" v-if="searched">
            <label class="search-label">关联的袋码：</label>
            <div class="related-codes-box">
              <div v-for="(item, index) in packData.list" :key="index" class="code-item">
                {{ item.code || '未知编码' }}
              </div>
              <div v-if="!packData.list || packData.list.length === 0" class="no-data">暂无关联袋码</div>
            </div>
          </div>

          <!-- 出库信息 -->
          <div
            class="search-row"
            v-if="searched && packData.status === '已出库' && packData.order && packData.order.length > 0"
          >
            <label class="search-label">出库信息：</label>
            <div class="order-info-box">
              <div v-for="(order, index) in packData.order" :key="index" class="order-item">
                <div class="order-row">
                  <span class="order-label">出库时间：</span>
                  <span class="order-value">{{ order.add_time }}</span>
                </div>
                <div class="order-row">
                  <span class="order-label">公司名称：</span>
                  <span class="order-value">{{ order.company }}</span>
                </div>
                <div class="order-row">
                  <span class="order-label">公司简称：</span>
                  <span class="order-value">{{ order.company_short }}</span>
                </div>
                <div class="order-row">
                  <span class="order-label">联系人：</span>
                  <span class="order-value">{{ order.user_name }}</span>
                </div>
                <div class="order-row">
                  <span class="order-label">联系电话：</span>
                  <span class="order-value">{{ order.user_phone }}</span>
                </div>
                <div class="order-row">
                  <span class="order-label">地区：</span>
                  <span class="order-value">{{ order.area_name }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { searchPackCode } from '@/api/seed';

export default {
  name: 'PackCodeIndex',
  data() {
    return {
      searchForm: {
        code: '',
      },
      packData: {
        list: [],
        status: '',
        order: [],
      },
      searched: false,
      loading: false,
    };
  },
  methods: {
    // 搜索袋码
    handleSearch() {
      if (!this.searchForm.code) {
        this.$message.warning('请输入单元识别码');
        return;
      }

      this.loading = true;
      searchPackCode(this.searchForm.code)
        .then((res) => {
          if (res.status === 200) {
            this.packData = res.data || { list: [], status: '', order: [] };
            this.searched = true;

            if (!this.packData.list || this.packData.list.length === 0) {
              if (this.packData.status === '未关联') {
                this.$message.info('该单元识别码未关联任何袋码');
              } else {
                this.$message.info('未查询到相关袋码信息');
              }
            } else {
              this.$message.success('查询成功');
            }
          } else {
            this.$message.error(res.msg || '查询失败');
            this.packData = { list: [], status: '', order: [] };
          }
        })
        .catch((err) => {
          this.$message.error(err.msg || '查询失败');
          this.packData = { list: [], status: '', order: [] };
        })
        .finally(() => {
          this.loading = false;
        });
    },

    // 获取状态样式类
    getStatusClass(status) {
      switch (status) {
        case '已出库':
          return 'status-shipped';
        case '未出库':
          return 'status-unshipped';
        case '未关联':
          return 'status-unrelated';
        default:
          return 'status-unknown';
      }
    },
  },
};
</script>

<style scoped lang="scss">
.pack-code-search {
  padding: 20px;

  .search-section {
    max-width: 800px;
    margin: 0 auto;

    .search-row {
      display: flex;
      align-items: flex-start;
      margin-bottom: 30px;

      .search-label {
        width: 120px;
        text-align: right;
        font-size: 16px;
        font-weight: 500;
        line-height: 40px;
        color: #333;
        margin-right: 20px;
        flex-shrink: 0;
      }

      .search-input {
        flex: 1;
        max-width: 500px;
        margin-right: 20px;
      }

      .search-btn {
        width: 100px;
        height: 40px;
      }

      .status-info {
        flex: 1;
        line-height: 40px;

        .status-shipped {
          color: #67c23a;
          font-weight: 500;
        }

        .status-unshipped {
          color: #e6a23c;
          font-weight: 500;
        }

        .status-unrelated {
          color: #909399;
          font-weight: 500;
        }

        .status-unknown {
          color: #f56c6c;
          font-weight: 500;
        }
      }

      .related-codes-box {
        flex: 1;
        max-width: 620px;
        border: 1px solid #dcdfe6;
        border-radius: 4px;
        min-height: 200px;
        max-height: 400px;
        overflow-y: auto;
        background-color: #fff;
        padding: 10px 15px;

        .code-item {
          padding: 8px 0;
          border-bottom: 1px solid #ebeef5;
          font-family: monospace;
          font-size: 14px;

          &:last-child {
            border-bottom: none;
          }
        }

        .no-data {
          padding: 30px 0;
          text-align: center;
          color: #909399;
          font-size: 14px;
        }
      }

      .order-info-box {
        flex: 1;
        max-width: 620px;
        border: 1px solid #dcdfe6;
        border-radius: 4px;
        background-color: #fff;
        padding: 15px;

        .order-item {
          padding: 10px 0;
          border-bottom: 1px solid #ebeef5;

          &:last-child {
            border-bottom: none;
          }

          .order-row {
            display: flex;
            margin-bottom: 8px;

            &:last-child {
              margin-bottom: 0;
            }

            .order-label {
              width: 80px;
              color: #606266;
              font-size: 14px;
              flex-shrink: 0;
            }

            .order-value {
              color: #303133;
              font-size: 14px;
              flex: 1;
            }
          }
        }
      }
    }
  }
}
</style>
